const path = require('path') // 引入 path 模块
const HtmlWebpackPlugin = require('html-webpack-plugin') // 引入处理 HTML 的插件
// 提取css
const MiniCssExtractPlugin = require('mini-css-extract-plugin') 
// 压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') 
const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 自动删除输出目录

module.exports = {
    entry: { // 入口改为对象可以配置多个入口
        // 公共的入口
        commonCSS: './src/js/common/commonCSS.js',
        dom: './src/js/common/dom.js', // 封装 DOM 操作
        http: './src/js/common/http.js', // 封装 AJAX 请求
        utils: './src/js/common/utils.js', // 可复用的工具函数
        captcha: './src/lib/captcha/captcha-mini.js',

        // 页面独有的入口
        advertisement: './src/js/advertisement.js',
        login: './src/js/login.js',
        register: './src/js/register.js'

    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name]-[hash:5].js',
    },
    mode: 'development',
    module: {
        rules: [
            { // 编译 CSS
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            { // 编译 Less
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            },
            { // 编译图片
                test: /\.(png|jpeg|jpg|gif)$/,
                loader: 'url-loader',
                options: {
                    name: '[hash:16].[ext]',
                    limit: 2 * 1024 * 1024,
                    esModule: false, // 避免 NodeJS 和 ES6 模块化冲突（简单了解）
                }
            }, { // 加载 HTML 中的资源（图片、视频）
                test: /\.html$/,
                loader: 'html-loader'
            }, { // 处理字体图标
                 test: /\.(eot|svg|ttf|woff|woff2)$/,
                 loader: 'file-loader',
                 options: {
                      name: '[hash:16].[ext]',
                      outputPath: 'fonts'
                 }
            }, 
            { // 把 ES6 的代码编译成 ES5
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({ // 注册
            template: './src/page/register.html',
            filename: 'register.html',
            chunks: ['register', 'commonCSS', 'captcha','http','utils','dom'] // 不需要顺序
        }),
        new HtmlWebpackPlugin({ // 登录
            template: './src/page/login.html',
            filename: 'login.html',
            chunks: ['login', 'commonCSS', 'http', 'utils','dom']
        }),
        new HtmlWebpackPlugin({ // 首页
            template: './src/page/advertisement.html',
            filename: 'advertisement.html',
            chunks: ['advertisement', 'commonCSS', 'dom', 'http', 'utils']
        }),
        new MiniCssExtractPlugin({ // 提取css
            filename: 'css/[name]-[hash:5].css' // 重命名输出的css
        }),
        
        new OptimizeCssAssetsWebpackPlugin(), // 压缩css

        new CleanWebpackPlugin() // 自动删除每次输出后的 dist
    ],

    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        compress: true,
        port: 666,
        open: true,
        openPage: 'login.html' // 自动打开的页面
    },
}